﻿<template>
  <div>
    <el-container>
      <el-main>
        <el-button type="primary" @click="updateNews()">
          更新当前页新闻
          <i class="el-icon-refresh"></i>
        </el-button>
        <el-button type="primary" @click="updateAllNews()">
          一键更新所有新闻
          <i class="el-icon-refresh"></i>
        </el-button>

        <el-table
          v-loading="tableLoding"
          :data="tableData.data"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border
        >
          <el-table-column type="expand">
            <template slot-scope="props">标题简介:{{props.row.digest}}</template>
          </el-table-column>
          <el-table-column prop="title" label="新闻标题"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" sortable></el-table-column>
          <el-table-column prop="thumbUrl" label="首页图片路径">
            <template slot-scope="props">
              <el-link
                :href="props.row.thumbUrl"
                target="_blank"
                type="primary"
              >{{props.row.thumbUrl}}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="url" label="文章路径">
            <template slot-scope="props">
              <el-link :href="props.row.url" target="_blank" type="primary">{{props.row.url}}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="show" label="是否发布" :formatter="showChangeData" sortable></el-table-column>
          <el-table-column label="操作" width="180px">
            <template slot-scope="props">
              <!-- 修改按钮 -->
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="showEditDialog(props.row.mediaId)"
              ></el-button>
              <!-- 删除按钮 -->
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="removeNewsById(props.row.mediaId)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>

      <el-footer>
        <div class="block">
          <el-pagination
            @size-change="changePageSize"
            @current-change="changeCurrentPage"
            @prev-click="prevPage"
            @next-click="nextPage"
            :current-page="tableData.currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="tableData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
          ></el-pagination>
        </div>
      </el-footer>
    </el-container>
    <!-- 修改新闻的对话框 -->
    <el-dialog
      title="修改新闻"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
      :close-on-click-modal="false"
    >
      <el-form :model="editNewsForm" ref="editFormRef" label-width="70px">
        <el-form-item label="新闻标题">
          <el-input v-model="editNewsForm.title"></el-input>
        </el-form-item>
        <el-form-item label="标题简介">
          <el-input v-model="editNewsForm.digest"></el-input>
        </el-form-item>
        <el-form-item label="图片路径">
          <el-input v-model="editNewsForm.thumbUrl"></el-input>
        </el-form-item>
        <el-form-item label="文章路径">
          <el-input v-model="editNewsForm.url"></el-input>
        </el-form-item>
        <el-form-item label="是否发布">
          <el-select v-model="editNewsForm.show">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editNewsInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getNewsData,
  getNewsById,
  editNewsInfo,
  removeNewsById,
  updateNews,
  updateAllNews
} from "@/api/newsApi";

export default {
  data() {
    return {
      tableData: {
        //表格data
        data: [],
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
      tableLoding: false, //表格加载
      changeRow: [],
      editDialogVisible: false,
      // 查询到的新闻信息对象
      editNewsForm: {},
      options: [
        {
          value: 1,
          label: "已发布"
        },
        {
          value: 0,
          label: "不发布"
        }
      ],
      editData: {}
    };
  },
  created: function() {
    this.getNewsData();
  },
  methods: {
    //更新所有新闻
    updateAllNews() {
      this.tableLoding = true;
      updateAllNews(this.tableData.total)
        .then(response => {
          this.$message({
            showClose: true,
            message: "更新成功!",
            type: "success"
          });
          this.tableLoding = false;
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: "更新失败",
            type: "error"
          });
          this.tableLoding = false;
        });
    },
    //分页更新新闻
    updateNews() {
      this.tableLoding = true;
      updateNews(this.tableData)
        .then(response => {
          this.$message({
            showClose: true,
            message: "更新成功!",
            type: "success"
          });
          this.tableLoding = false;
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: "更新失败!",
            type: "error"
          });
          this.tableLoding = false;
        });
    },
    //获取新闻数据
    async getNewsData() {
      this.tableLoding = true;
      getNewsData(this.tableData)
        .then(response => {
          this.tableData.data = response.data.data.items;
          console.log(this.tableData.data);
          this.tableData.total = response.data.data.total;
          this.tableLoding = false;
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: error,
            type: "error"
          });
          this.tableLoding = false;
        });
    },
    changePageSize(val) {
      this.tableData.pageSize = val;
      this.getNewsData();
    },
    changeCurrentPage(val) {
      this.tableData.currentPage = val;
      this.getNewsData();
    },
    prevPage(val) {
      this.tableData.currentPage = val;
      this.getNewsData();
    },
    nextPage(val) {
      this.tableData.currentPage = val;
      this.getNewsData();
    },
    showChangeData: function(row, column) {
      return row.show == "1" ? "已发布" : row.show == "0" ? "未发布" : "未知";
    },
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    handleSelectionChange(val) {
      this.changeRow = val;
    },
    selectable(row, index) {
      if (row.show == 1) {
        return false;
      } else {
        return true;
      }
    },
    // 展示编辑新闻的对话框
    async showEditDialog(mediaId) {
      // console.log(id)
      getNewsById(mediaId)
        .then(response => {
          this.editNewsForm = response.data.data.news;
          console.log(this.editNewsForm);
          this.tableLoding = false;
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: error,
            type: "error"
          });
          this.tableLoding = false;
        });
      this.editDialogVisible = true;
    },
    // 删除新闻
    async removeNewsById(mediaId) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm(
        "此操作将永久删除该新闻, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      // console.log(id)
      removeNewsById(mediaId)
        .then(response => {
          this.$message({
            showClose: true,
            message: "删除成功！",
            type: "success"
          });
          this.tableLoding = false;
          this.getNewsData();
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: "删除失败！",
            type: "error"
          });
          this.tableLoding = false;
        });
    },
    // 监听修改新闻对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();

      this.editDialogVisible = false;
    },
    // 修改新闻
    async editNewsInfo() {
      (this.editData.mediaId = this.editNewsForm.mediaId),
        (this.editData.title = this.editNewsForm.title),
        (this.editData.thumbUrl = this.editNewsForm.thumbUrl),
        (this.editData.url = this.editNewsForm.url),
        (this.editData.show = this.editNewsForm.show),
        (this.editData.digest = this.editNewsForm.digest),
        console.log(this.editData);
      editNewsInfo(this.editData)
        .then(response => {
          this.$message({
            message: "修改成功！",
            type: "success"
          });
          this.tableLoding = false;
          this.editDialogVisible = false;
          this.getNewsData();
        })
        .catch(error => {
          this.$message({
            message: "修改失败",
            type: "error"
          });
          this.tableLoding = true;
        });
    }
  }
};
</script>

<style>
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #70b3ff87 !important;
}
</style>